<template>
  <div>
      <header>
        <van-search
            v-model="value"
            placeholder="请输入搜索关键词"
            show-action
            background="#FAFAFA"
            
        >
            <template #left>
              <van-icon name="arrow-left" class="iconleft" @click="handleOff"/>
            </template>
            <template #action>
              <van-icon name="chat-o" class="iconright"/>
            </template>
        </van-search>
        </header>
        <van-tabs 
        v-model="activeName" 
        sticky
        @click="clicktab()"
        >
            <van-tab title="综合" name="a" to="">综合略111</van-tab>
            <van-tab title="销量" name="b">销量略</van-tab>
            <van-tab title="新品" name="c">新品略</van-tab>
            <van-tab title="价格" name="d" >
              <router-view>

                
              </router-view>
              <template #title>
                价格
                <van-icon name="arrow-down" />
              </template>
              价格略
            </van-tab>
        </van-tabs>
        <div class="choose_price" v-show="this.activeName == 'd'">
          <div class="cli_top">
            <span>60-80</span>
            <span>80-100</span>
            <span>100-200</span>
          </div>
          <div class="cli_bottom">
            <span>区间(元)</span>
            <input type="text">
            <a href="javascript:void(0)"><span class="btn">确认</span></a>
          </div>
        </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '女装', // 搜索框的值
      activeName: 'a', // 标签页
      state: false,
      tabs: [
        {
          title: '综合',
          name:'',
          path: ''
        }
      ]
    };
  },
  methods: {
    clicktab(){
      if(this.activeName == 'd'){
        // console.log(11111);
        this.state = !this.state
      }else{
        this.state = false
      }
    },
    handleOff(){
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="stylus" scoped>

html
body
  width 100%
  height 100%
header
position relative
  width 100%
  .van-search
    padding 10px
    .iconleft
      padding-right 8px
    .iconright
      padding 8px 0 0 4px
.van-search__content
  background-color #ECECEC

.choose_price
  padding 12px
  box-sizing border-box
  height 100px
  width 100%
  background-color #fff
  z-index 999
  position absolute
  top 98px
  left 0
  transition height 2s
.cli_top
  display flex
  justify-content space-between
.cli_top  span
    height 28px
    width 100px
    line-height 30px
    text-align center
    display inline-block
    background-color #F3F3F3
    margin 7px 0px
.cli_bottom
  display flex
  justify-content space-between
  padding 4px
  .btn 
    display inline-block
    width 85px
    height 30px
    line-height 30px
    text-align center
    background-color #FF5B76
    color #fff
   
</style>